<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title>Weather Crowd : From GovHAck</title>
    <link rel="shortcut icon" href="favicon.ico" />
	
    <link rel="stylesheet" href="css/style.css" media="all" type="text/css" />
    <link rel="stylesheet" href="lib/jquery-ui/css/smoothness/jquery-ui-1.8.15.custom.css" type="text/css" />
    <link rel="stylesheet" href="lib/fancybox/jquery.fancybox-1.3.4.css" type="text/css" />
    <link rel="stylesheet" href="lib/harvesthq-chosen/chosen.css" type="text/css" />
    <link rel="stylesheet" href="lib/visualize/visualize.css" media="all" type="text/css" />
    <link rel="stylesheet" href="lib/datatables/css/table_jui.css" type="text/css" />
    <link rel="stylesheet" href="lib/timepicker-addon/jquery-ui-timepicker-addon.css" type="text/css" />
    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans" type="text/css" />
	
    <script type="text/javascript" src="js/head.load.min.js"></script>

</head>
<body class="bg_c sidebar fixed stA">
    
   	<div id="header">
		<div class="wrapper cf">
			<div class="logo fl">
				<a href="#"><img src="images/logo.png" alt="" /></a>
			</div>	
			<ul class="fr cf" id="main_nav">
			    <li class="nav_item"><a href="index.html" class="main_link"><span>Home</span></a></li>
			    <li class="nav_item"><a href="thedata.html" class="main_link"><span>The Data</span></a></li>
			    <li class="nav_item active"><a href="charts.html" class="main_link"><span>Charts</span></a><img class="tick tick_a" alt="" src="images/blank.gif" /></li>
			    <li class="nav_item"><a href="contactus.html" class="main_link"><span>Contact Us</span></a></li>
			</ul>
		</div>
	</div>
	
	<div id="main">
		<div class="wrapper cf">
			<div id="main_section" class="cf brdrrad_a">
			   
				<div id="content_wrapper">
					
						<h1 class="sepH_c">Data Charts</h1>
						
						 <form action="./ChartServlet" class="js_submit" method="post">
							<div class="formEl_a">
								<fieldset class="sepH_b">
								  <div class="sepH_b">
								      <div class="dp100">
									<div class="dp33">
									<label for="l_select" class="lbl_a">Select BOM Data Source Location: </label>
									<select name="l_select" id="l_select">
									    <option></option>
									    <option value="option_1">-----Canberra-----</option>
									    <option value="option_2">-----Bathurst-----</option>
									    <option value="option_3">-----Waga Waga-----</option>
									</select><br /><br />
									</div>
									<div class="dp33">
									<label for="user_location" class="lbl_a">Select User Location: </label>
									<select name="l_select" id="l_select">
									    <option></option>
									    <option value="option_1">----Bruce----</option>
									    <option value="option_2">----Belconnen----</option>
									    <option value="option_3">----Hawker----</option>
									</select> <br /><br />
									</div>
									<div class="dp33">
									<label for="user_select" class="lbl_a">Select User:</label>
									<select name="user_select" id="user_select">
									    <option></option>
									    <option value="user_1">----Bob----</option>
									    <option value="user_2">----Tom----</option>
									    <option value="user_3">----Bill----</option>
									</select> <br /><br />
									</div>
								      </div>
								      <div class="sepH_b dp100">
									<div class="dp33">
									     <label for="dataselect" class="lbl_a">Select Data</label>
										<select name="dataselectmulti" id="dataselectmulti" multiple="multiple">
											<option value="data_1">1. Historical Rain</option>
											<option value="data_2">2. User Rain</option>
											<option value="data_3">3. Historical Temperature</option>
											<option value="data_4">4. User Temperature</option>
										</select>
										<span class="f_help">ctrl+click to select multiple items.</span>									
									</div>
									<div class="dp33">
									     <label for="dataselect" class="lbl_a">Select Events</label>
										<select name="dataselectmulti" id="dataselectmulti" multiple="multiple">
											<option value="data_1">1. Fire</option>
											<option value="data_2">2. Hail</option>
											<option value="data_3">3. Fog</option>
											<option value="data_4">4. Cyclone</option>
											<option value="data_5">5. Dust</option>
											<option value="data_6">6. Heavy Storm</option>
										</select>
										<span class="f_help">ctrl+click to select multiple items.</span>									
									</div>
									<div class="dp33">
									      <fieldset class="sepH_b">
									      <legend>Date Range</legend>
									      <label for="fromrange" class="lbl_a">From</label>
									      <input type="text" id="datepicker1" class="inpt_b datepicker" readonly="readonly" name="datepicker1" />
									      <label for="torange" class="lbl_a">To</label>
									      <input type="text" id="datepicker2" class="inpt_b datepicker" readonly="readonly" name="datepicker2" /> 
									      </fieldset>
									</div>
								      </div>
								   </div>
								      <button type="submit" class="btn btn_c sepV_a"><span>Construct Chart</span></button>
								   </fieldset>
							</div>
						</form> 
				</div>

				  <h2 class="sepH_b">Chart Display</h2>
					<div class="box_c" id="dc_tabs">
						<div class="box_c_heading cf">
						  <p class="fl">Charts</p>
							<ul class="tabsS fr">
							  <li><a href="#">Chart1</a></li>
							   <li><a href="#">Chart2</a></li>
							</ul>
						</div>
						<div class="box_c_content">
						    <div id="chart_h" class="fsChart">Combination style Chart</div>
						     <div id="chart_k" class="fsChart">Combination style Chart</div>
						      <div id="chart_l" class="fsChart">Combination style Chart</div>
						     <div id="chart_m" class="fsChart">Combination style Chart</div>
						    <div id="chart_n" class="fsChart">Combination style Chart</div>
						     <div id="chart_o" class="fsChart">Combination style Chart</div>
						 </div>
					</div>
			</div>
		</div>
	</div>
	
	<div id="footer">
	   <div class="wrapper">
		  <div class="cf ftr_content">
			<p class="fl">Copyright &copy; 2012 weathercrowd</p>
			
		  </div>
	   </div>	
	</div>
	
	<script type="text/javascript">
		head.js("js/jquery-1.6.2.min.js");
		head.js("lib/jquery-ui/jquery-ui-1.8.15.custom.min.js");
		head.js("lib/datatables/jquery.dataTables.min.js");
		head.js("lib/datatables/dataTables.plugins.js");
		head.js("lib/harvesthq-chosen/chosen.jquery.min.js");
		head.js("lib/visualize/visualize.jQuery.js");
		head.js("lib/visualize/excanvas.js");
		head.js("lib/fusion-charts/FusionCharts.js");
		head.js("lib/fancybox/jquery.easing-1.3.pack.js");
		head.js("lib/fancybox/jquery.fancybox-1.3.4.pack.js");
		head.js("js/jquery.tools.min.js");
		head.js("js/jquery.text-overflow.min.js");
		head.js("js/xbreadcrumbs.js");
		head.js("js/custom.js");
		head.js("lib/timepicker-addon/jquery-ui-timepicker-addon.js");

	      head.ready(function(){
			
			lga_fusionCharts.chart_h();
			lga_fusionCharts.chart_k();
			lga_fusionCharts.chart_l();
			lga_fusionCharts.chart_m();
			lga_fusionCharts.chart_n();
			lga_fusionCharts.chart_o();
			lga_datepicker.init();
			
        });
		


	</script>

</body>
</html>
